<template>
  <div class="container">
    <div class="select-wrap">
      <el-button type="primary" @click="save">保存</el-button>
      <!-- <el-select v-model="value" placeholder="请选择" @change="selectChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select> -->
    </div>
    <div ref="gantt" class="gantt-container" />

    <el-dialog
      :title="dialogType == 'add' ? '新增' : '编辑'"
      :visible.sync="createDialog"
      @close="hideDialog"
    >
      <!-- 新增&编辑dialog框 -->
      <DialogModule ref="createDialog" :dialog-data="dialogData" :dialog-type="dialogType" @submit="submit" />
      <!-- 底部button框 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  gantt
} from 'dhtmlx-gantt' // 引入插件
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css' // 引入插件样式
import { ganttConfig } from './ganttConfig.js'
import DialogModule from './components/dialogModule'
import { demoData } from './ganttData.js'
import { deepClone } from '@/utils'
// import moment from 'moment'
export default {
  name: 'GanttView',
  components: {
    DialogModule
  },
  data() {
    return {
      createDialog: false,
      dialogData: {},
      dialogType: '',
      tasksActiveId: null,
      tasks: {
        data: []
      },
      options: [{
        value: '1',
        label: '全部'
      }, {
        value: '2',
        label: '2021年'
      }, {
        value: '3',
        label: '30天'
      }, {
        value: '4',
        label: '40天'
      }, {
        value: '5',
        label: '5'
      }],
      value: '1',
      list: deepClone(demoData)
    }
  },
  mounted() {
    this.initGantt()
  },
  methods: {
    save: function () {
      // 获取全部任务
      var tasksStore = gantt.getDatastore('task').pull
      console.log(tasksStore, 'tasksStore')
      console.log(this.list, 'list')
    },
    // 表单验证
    confirm() {
      console.log('提交confirm')
      this.$refs.createDialog.confirm()
    },
    hideDialog() {
      this.createDialog = false
      this.dialogType = ''
      this.tasksActiveId = null
      this.$refs.createDialog.initForm()
    },
    changeData(type, id, task) {
      const index = this.list.findIndex(item => item.id === Number(id))
      this.dialogType = type
      this.tasksActiveId = id
      switch (type) {
        case 'add':
          this.createDialog = true
          break
        case 'edit':
          this.dialogData = this.list[index]
          this.createDialog = true
          break
        case 'update':
          this.list[index] = {
            ...this.list[index],
            ...task
          }
          break
        case 'delete':
          this.list.splice(index, 1)
          break
      }
    },
    submit(data) {
      const index = this.list.findIndex(item => item.id === Number(this.tasksActiveId))
      const newData = {
        ...this.list[index],
        ...data
      }
      const newTaskData = {
        ...newData,
        id: this.list.length + 1,
        parent: this.tasksActiveId
      }
      switch (this.dialogType) {
        case 'add':
          // 新增任务
          gantt.addTask(newTaskData)
          this.createDialog = false
          this.list.push(newTaskData)
          this.hideDialog()
          break
        case 'edit':
          this.createDialog = false
          this.list[index] = newData
          gantt.updateTask(newData.id, newData)
          this.hideDialog()
          break
        case 'delete':
          this.list.splice(index, 1)
          break
      }
    },
    // 初始化gantt
    initGantt: function () {
      ganttConfig()
      // 初始化
      gantt.init(this.$refs.gantt)
      // 数据解析
      gantt.parse({
        data: this.list
      })

      // 添加任务
      gantt.AddTask = function () {
        _that.changeData('add', 0)
      }

      const _that = this
      // 绑定点击事件
      gantt.attachEvent('onTaskClick', function (id, e) {
        var button = e.target.closest('[data-action]')
        if (button) {
          var action = button.getAttribute('data-action')
          console.log(action, 'action')
          _that.changeData(action, id)
          return false
        }
        return true
      })

      // 处理拖放操作
      gantt.attachEvent('onTaskDrag', function (id, mode, task, original) {
        console.log('任务被拖动', id, mode, task, original)
        // _that.changeData('edit', task, id)
        _that.changeData('update', id, task)

        return false // 返回 true 以允许拖放操作
      })
      // 双击事件
      gantt.attachEvent('onTaskDblClick', function () {
        // any custom logic here
        // 禁用弹框
        return false
      })

      // // 任务保存
      // gantt.attachEvent('onLightboxSave', function (id, task, is_new) {
      //   // 新增
      //   const type = is_new === true ? 'add' : 'edit'
      //   _that.changeData(type, task, id)
      //   return true
      // })

      // // 删除任务
      // gantt.attachEvent('onLightboxDelete', function (id, task) {
      //   _that.changeData('delete', task, id)
      //   return true
      // })
    },
    selectChange(val) {
      console.log(val)
      // 测试用例
      var obj = {
        toolTipsTxt: '新增任务',
        text: '任务名', // 任务名
        start_date: '2020-04-15', // 开始时间
        id: 24, // 任务id
        duration: 2, // 任务时长，从start_date开始计算
        parent: 2, // 父任务ID
        type: 4,
        progress: 0,
        status: 'popular'
      }
      this.tasks.data.push(obj)

      // 数据解析
      gantt.parse(this.tasks)
      // 刷新数据
      gantt.refreshData()
    }
  }
}
</script>
<style lang="scss">
.gantt-container {
  height: 800px;
  width: 100%;
}

// 弹框样式优化
.gantt_cal_light .gantt_title span {
  height: 0;
  overflow: hidden;
}

.firstLevelTask {
  border: none;

  .gantt_task_content {
    font-size: 13px;
  }
}

.secondLevelTask {
  border: none;
}

.thirdLevelTask {
  border: 2px solid #da645d;
  color: #da645d;
  background: #da645d;
}

.milestone-default {
  border: none;
  background: rgba(0, 0, 0, 0.45);
}

.milestone-unfinished {
  border: none;
  background: #5692f0;
}

.milestone-finished {
  border: none;
  background: #84bd54;
}

.milestone-canceled {
  border: none;
  background: #da645d;
}

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  width: 100%;
  position: relative;

  .gantt_grid_head_cell {
    padding-left: 20px;
    text-align: left !important;
    font-size: 14px;
    color: #333;
  }

  .select-wrap {
    position: absolute;
    top: 25px;
    z-index: 99;
    width: 90px;
    left: 180px;

    .el-input__inner {
      border: none;
    }
  }

  .left-container {
    height: 100%;
  }

  // .parent {
  //   .gantt_tree_icon {
  //     &.gantt_folder_open {
  //       // background-image: url(assets/gantt-icon.svg) !important;
  //     }

  //     &.gantt_folder_closed {
  //       // background-image: url(assets/gantt-icon-up.svg) !important;
  //     }
  //   }
  // }

  .green,
  .yellow,
  .pink,
  .popular {
    .gantt_tree_icon.gantt_file {
      background: none;
      position: relative;

      &::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .green {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #84bd54;
      }
    }
  }

  .yellow {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #fcca02;
      }
    }
  }

  .pink {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #da645d;
      }
    }
  }

  .popular {
    .gantt_tree_icon.gantt_file {
      &::before {
        background: #d1a6ff;
      }
    }
  }

}

.left-container {
  height: 100%;
}

.gantt_task_content {
  text-align: left;
  padding-left: 10px;
}
</style>
